<style lang="scss">
	page {
		// overflow: hidden;
		height: 1500rpx;
		// background-color: #f1f1f1;
		background-color: white;
	}

	.box-shadow {
		box-shadow:
			0.2px 0.2px 0px rgba(0, 0, 0, 0.02),
			0.5px 0.5px 0px rgba(0, 0, 0, 0.028),
			1px 0.9px 0px rgba(0, 0, 0, 0.035),
			1.8px 1.6px 0px rgba(0, 0, 0, 0.042),
			3.3px 2.9px 0px rgba(0, 0, 0, 0.05),
			8px 7px 0px rgba(0, 0, 0, 0.07);
	}

	.box-shadow2 {
		box-shadow:
			0px 0px 0.4px rgba(0, 0, 0, 0.02),
			0px 0px 0.9px rgba(0, 0, 0, 0.028),
			0px 0px 1.8px rgba(0, 0, 0, 0.035),
			0px 0px 3.1px rgba(0, 0, 0, 0.042),
			0px 0px 5.8px rgba(0, 0, 0, 0.05),
			0px 0px 14px rgba(0, 0, 0, 0.07);
	}

	.box-shadow3 {
		box-shadow:
			0px 2.2px 1.3px rgba(0, 0, 0, 0.003),
			0px 5.3px 3.2px rgba(0, 0, 0, 0.004),
			0px 10px 6px rgba(0, 0, 0, 0.005),
			0px 17.9px 10.7px rgba(0, 0, 0, 0.006),
			0px 33.4px 20.1px rgba(0, 0, 0, 0.007),
			0px 80px 48px rgba(0, 0, 0, 0.01);
	}

	.appBar {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;

		.left {
			margin-left: 3%;
			height: 45rpx;
			width: 150rpx;
			font-size: 20rpx;
			text-align: center;
			background-color: white;
		}

		.rigth {
			margin-right: 4%;
		}
	}

	.appCar {
		width: 100%;
		height: 550rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.appBar-info {
			border-radius: 15rpx;
			margin-top: 3%;
			width: 94%;
			height: 45%;
		}

		.info1 {
			height: 48%;
			background: linear-gradient(to bottom right, #fcfffa, #FEE5E2);
			// border: 1px #fdffff solid;
		}

		.info2 {
			height: 45%;
			background: linear-gradient(to left, #fff, #e2fbfe);
		}
	}

	.all {
		margin-left: 3%;
		height: 30rpx;
		border-radius: 10rpx;
		width: 100rpx;
		font-size: 20rpx;
		text-align: center;
		display: inline-block;
		background-color: white;
	}

	.info {
		height: 765rpx;
		width: 100%;
	}

	.box-info {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: #f9f9f9;
	}

	.info-list {
		height: 120rpx;
		width: 90%;
		margin-top: 3%;
		border-radius: 20rpx;
		background-color: white;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.event {
		font-size: 40rpx;
		position: relative;
		left: 3%;
	}

	.description {
		font-size: 25rpx;
		left: 10%;
		color: #9a9a9a;
		position: relative;
	}

	.colorType {
		position: relative;
		left: 76%;
		height: 50rpx;
		width: 10rpx;
		border-radius: 10rpx;
		background-color: pink;
	}

	.null-list {
		margin-top: 15%;
	}
</style>
<template>
	<view>
		<view class="appBar">
			<button class="left" @click="">注意事项</button>
			<view class="rigth" @click="">
				icon
			</view>
		</view>
		<view class="appCar">
			<view class="appBar-info info1 box-shadow">
				<view class="date"></view>
				<view class="task"></view>
			</view>
			<view class="appBar-info info2 box-shadow">
				<view>任务进度</view>
				<view class="progress"></view>
			</view>
		</view>
		<view class="appBar">
			<view class="all box-shadow2">全部</view>
		</view>
		<!-- <u-line color="#aaad99" /> -->
		<scroll-view scroll-y class="info">
			<view class="box-info">
				<view class="info-list box-shadow3" v-for="i in list" v-if="listL !== 0">
					<view class="event">工作</view>
					<view class="description">描述...</view>
					<view class="colorType"></view>
				</view>
				<view v-if="listL === 0" class="null-list">
					<u-empty text="内容为空" mode="list"></u-empty>
				</view>
				<view style="width: 100%; height: 130rpx;"></view>
			</view>
		</scroll-view>
		<NavigationBar page="0" color="#fedecd" />
	</view>
</template>

<script>
	import NavigationBar from '../components/NavigationBar/NavigationBar.vue';
	export default {
		data() {
			return {
				list: [1, 2, 3, 4, 5, 6, 76, 8, 9, 9, 9, 2],
				// list: []
			}
		},
		computed: {
			listL() {
				return this.list.length;
			}
		},
		methods: {},
		components: {
			NavigationBar
		},
		created() {
			console.log(this.listL);
		}
	}
</script>